<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

<head>
	<meta charset="UTF-8">
	<title>@name@</title>

	<!-- @include meta.html -->
	<!-- @include scripthead.html -->

	<link rel="alternate" type="application/json+oembed" href="@oembedurl@&format=json" />
	<link rel="alternate" type="text/xml+oembed" href="@oembedurl@&format=xml" />
</head>

<body id='root' class='root expandIt share-page'>

	<div class="showDesktop page-header">
		<div class="ui container">
				<div id="page-header-wrapper">
					<div class="page-header-item page-header-content no-grow">
						<h2 class="ui item header">@title@</h2>
					</div>
					<div class="page-header-item show-code-toggle">
						<button id="show-code-button" class="ui tiny default button">Show Code</button>
						<a href="/@versionsuff@#pub:@id@" class="ui tiny button landscape only">Edit Code</a>
					</div>
					<div class="page-header-item no-grow">
						<a href="https://makecode.com/org" title="Go to Microsoft MakeCode" aria-label="Microsoft MakeCode Logo" role="menuitem" target="blank" rel="noopener" class="ui item logo organization">
							<img class="ui logo portrait hide" src="./static/Microsoft-logo_rgb_c-gray.png" alt="Microsoft MakeCode Logo">
							<img class="ui mini image portrait only" src="./static/Microsoft-logo_rgb_c-gray-square.png" alt="Microsoft MakeCode Logo">
						</a>
					</div>
				</div>
			</div>
	</div>
	<!-- @include macros.html -->
	<aside id=main-container class=box>
		@BODY@
	</aside>

	<div class="ui main container mainbody script-content">
		<iframe id="embed-frame" class="script-embed" src="/@versionsuff@--run?fullscreen=1&nofooter=1&id=@id@"  sandbox="allow-popups allow-forms allow-scripts allow-same-origin"
		frameborder="0"></iframe>
		<div class="script-bookend">
				<div id="abuse-message" class="ui tiny blue message">
						<div class="ui grid padded">
							<div class="abuse content">
								<p>
									The content above is provided by a user, and is not endorsed by Microsoft.
									<a style='text-decoration:underline' id="abuse" href="#">Report abuse</a> if you think it's not appropriate.
								</p>
							</div>
						</div>
					</div>

					<div class="ui small modal" id='abusemodal'>
						<div class="header">Report abuse</div>
						<div class="content">
							<div class="ui form">
								<div class="field">
									<label>Why do you find it offensive?</label>
									<textarea id='abusetext' rows="2"></textarea>
								</div>
							</div>
						</div>
						<div class="actions">
							<div class="ui ok button violet">
								<i class='ui flag icon'></i> Submit
							</div>
							<div class="ui cancel button">
								<i class='ui cancel icon'></i> Cancel
							</div>
						</div>
					</div>

					<div class="ui small modal" id='abusedone'>
						<div class="header">Report sent</div>
						<div class="content">
							<p>
								Thank you for helping keep Microsoft MakeCode a friendly place!
							</p>
						</div>
						<div class="actions">
							<div class="ui ok green button">
								<i class='ui trophy icon'></i> OK
							</div>
						</div>
					</div>


					<script>
						$(function() {
							var id = "@id@";
							var now = Math.round(Date.now()/1000);
							$(".humantime").each(function() {
								$(this).text(
									describetime(now, parseInt($(this).data("time")))
								)
							})
							$("#abuse").click(function() {
								$("#abusemodal")
									.modal({
										onApprove: function() {
											$.ajax({
												type: 'POST',
												url: '/api/@id@/abusereports',
												data: JSON.stringify({
													text: $('#abusetext').val()
												}),
												success: function() {
													$("#abusedone").modal("show");
												},
												contentType: "application/json",
												dataType: 'json'
											});
										}
									})
									.modal("show");
							})
						})
					</script>
		</div>
		<div class="script-bookend">
			<div style="text-align: center;">

					<div class="ui container horizontal mini link list">
						<!-- <a class="ui item " href="https://makecode.com/contact " target="_blank " rel="noopener ">Contact Us</a> -->
						<a class="ui item " href="https://makecode.com/privacy " target="_blank " rel="noopener ">Privacy &amp; Cookies</a>
						<a class="ui item " href="https://makecode.com/termsofuse " target="_blank " rel="noopener "> Terms Of Use</a>
						<a class="ui item " href="https://makecode.com/trademarks " target="_blank " rel="noopener ">Trademarks</a>
						<div class="ui item ">© 2019 Microsoft</div>
					</div>
				</div>
		</div>

		@body@
	</div>

	<script>
		var editorEmbedURL = "/@versionsuff@#sandbox:@id@";
		var gameEmbedURL = "/@versionsuff@--run?fullscreen=1&nofooter=1&id=@id@";
		var showCodeButton = document.getElementById("show-code-button");
		var frame = document.getElementById("embed-frame");

		var isGame = true;

		showCodeButton.addEventListener("click", function() {
			// toggle game vs. code view
			if (isGame) {
				frame.setAttribute("src", editorEmbedURL);
				showCodeButton.textContent = "Show Game";
			}
			else {
				frame.setAttribute("src", gameEmbedURL);
				showCodeButton.textContent = "Show Code";
			}
			isGame = !isGame;
		});
	</script>

	<!-- @include tracking.html -->
</body>
</html>